<template>
	<view class="consignment">
		<view class="form">
			<u--form :rules="rules" ref="consignment" :model="form" labelPosition="top" labelWidth="200" :labelStyle="{color: '#ffffff', fontSize: '25rpx', paddingBottom: '10rpx'}">
				<u-form-item label="你要寄售的价格(¥)" prop="price">
					<u--input v-model="form.price" class="input" type="number" color="#ffffff" maxlength="12"></u--input>
				</u-form-item>
				<u-form-item label="交易密码" prop="safePassword">
					<u--input v-model="form.safePassword" type="password" class="input" color="#ffffff" maxlength="10"></u--input>
				</u-form-item>
				<view class="textRight">服务费：手续费5% 版税2.5%</view>
				<u-form-item>
					<button @click="onLogin" class="light-btn btn" :class="{inactive: !selected}">提交</button>
				</u-form-item>
				<u-form-item>
					<view class="intro">
						<u-checkbox-group>
							<u-checkbox @change="onChange" :checked="selected" activeColor="#2979ff" size="14" iconSize="10" shape="circle"></u-checkbox>
						</u-checkbox-group>
						<view>
							<text>我知晓并同意</text>
							<text class="light">《商户入驻协议》</text>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				selected: true,
				rules: {
					price: [
						{
							type: 'string',
							required: true,
							message: '请输入价格',
							trigger: ['blur']
						}
					],
					safePassword:[
						{
							type: 'string',
							required: true,
							message: '请输入交易密码',
							trigger: ['blur']
						},
					]
				},
				form: {
					saleType:0,
					price: "",
					safePassword: "",
					commodityId:""
				}
			}
		},
		onLoad(option) {
			this.form.commodityId = option.commodityId;
		},
		methods: {
			...mapActions('user', ['createSellOrder']),
			onChange(v){
				this.selected = v
			},
			onLogin(){
				if(!this.selected) return; 
				this.$refs.consignment.validate().then(res => {
					this.createSellOrder(this.form).then(res => {
						uni.$u.toast("寄售成功");
						this.$refs.consignment.resetFields();
						setTimeout(()=>{
							uni.navigateBack({delta:1});
						},1500)
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.consignment{
		.form{
			padding: 20rpx 20rpx;
			.input{
				background-color: #232639 !important;
				border: 1rpx solid #666666 !important;
				color: #ffffff;
			}
			.intro{
				color: #ffffff;
				font-size: 25rpx;
				display: flex;
				.light{
					color: #2979ff;
				}
			}
			.textRight{
				font-size: 24rpx;
				color: #bf8fef;
			}
		}
		.btn{
			margin-top: 20rpx;
			width: 100%;
		}
		.inactive{
			background: #999999 !important;
		}
	}
</style>
